<template>
  <div class="photo-from">
    <!-- 分类 -->
    <el-menu 
      mode="horizontal" 
      default-active="0" 
      :active-text-color="theme"
      @select="handleSelect"
    >
      <el-menu-item :index="index + ''" v-for="(item, index) in fromList" :key="index">
        <span slot="title">{{ item.name }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'PhotoFrom',
  data() {
    return {
      fromList: [
        { from: null, name: '全部资源' },
        { from: 0, name: '本地资源' },
        { from: 1, name: '网络资源' },
      ]
    }
  },
  computed: {
    theme() {
      return this.$store.state.settings.theme
    },
  },
  methods: {
    // 切换
    handleSelect(index) {
      const currentFrom = this.fromList[index]
      currentFrom.menuIndex = Number(index)
      this.$emit('from-select', currentFrom)
    },
  },
}
</script>

<style lang="scss" scoped>
.photo-from {
  .el-menu.el-menu--horizontal {
    border-bottom: none;
    .el-menu-item {
      height: 59px;
    }
  }
}

</style>